<template>
	<div class="main">
		<div>
			<div>
				<img src="@/assets/images/wechat/student/practice/1.png">
			</div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/practice/3.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/practice/2.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/practice/4.png">
				</div>
			</div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/practice/3.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/practice/6.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/practice/7.png">
				</div>
			</div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/practice/3.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/practice/8.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/practice/9.png">
				</div>
			</div>
			<div>
				<img src="@/assets/images/wechat/student/practice/bom.png">
			</div>
		</div>
		<div>
			<div>
				<img src="@/assets/images/wechat/student/practice/5.png">
			</div>
			<div>剩余挑战次数：5次</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				
			}
		},
		created:async function() {
			
		},
		beforeMount: function() {
	
		},
		mounted: function() {
	
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #670914;
		>div:nth-child(1){
			overflow: hidden;
			margin-top:34px;
			margin-left:16px;
			margin-right:16px;
			>div:nth-child(1){
				>img{
					width: 100%;
				}
			}
			>div:nth-child(2),>div:nth-child(3),>div:nth-child(4){
				margin-top:22px;
				position: relative;
				>div:nth-child(1){
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					position: absolute;
					left:47px;
					top:16px;
					bottom: 5px;
					>img{
						margin:auto;
						width:100%;
						height:100%;
					}
				}
				>div:nth-child(3){
					position: absolute;
					right:34px;
					top:32px;
					bottom: 32px;
					>img{
						margin:auto;
						width:100%;
						height:100%;
					}
				}
			}
			>div:nth-child(5){
				>img{
					width: 100%;
				}
			}
		}
		>div:nth-child(2){
			position: relative;
			width:200px;
			margin:auto;
			margin-top:20px;
			margin-bottom:30px;
			>div:nth-child(1){
				>img{
					width:100%;
				}
			}
			>div:nth-child(2){
				position: absolute;
				top:0;
				left:0;
				right:0;
				text-align: center;
				line-height:38px;
				color:#FFFFFF;
				font-weight: 600;
				font-size:18px;
			}	
		}	
	}
</style>
